<template>
  <div class="persion">
    <p>一辆{{ car.name }}汽车，价值{{ car.price }}万</p>
    <button @click="changeName">修改汽车价格</button>
    <p>游戏</p>
    <ul>
      <li v-for="g in games" v-bind:key="g.id">{{ g.name }}</li>
    </ul>
    <button @click="changeAge">修改第一个游戏名</button>
  </div>
</template>

<script lang="ts" setup>
import { reactive } from 'vue'
import { ref } from 'vue'
let car = ref({ name: '奔驰', price: 100 })
let games = reactive([
  { id: 1, name: '王者荣耀' },
  { id: 2, name: '王者' },
  { id: 3, name: '王' },
])

function changeName() {
  car.value.price += 10
}
function changeAge() {
  games[0].name = 'wangzherongyao'
}
</script>

<style lang="scss"></style>
